<template>
  <div>
 
     <div class="article-page">
    <div
      class="article-item" v-for="item in info" :key="item.title" @click="toDetail(item)">
      <div class="head">
        <div class="pic">图片</div>
        <div class="con">
          <p class="title">{{item.title}}</p>
          <p class="other">{{item.desc}}</p>
            <div><span>{{item.tags[0]}}</span></div>
        <div><span>{{item.price}}</span>" 元/月"</div>
        </div>
      </div>
    </div>
  </div>
  
  </div>

</template>

<script>
export default {
  name: 'CollectPage',
  data(){
    return {
      info: [
            {
                "houseImg": "/uploads/upload_cf2330de6d95e4169bb6079f779fa6f0.jpg",
                "title": "请按时地方",
                "tags": [
                    "近地铁"
                ],
                "price": 100,
                "desc": "一室/90/东/君林天下",
                "houseCode": "a742d063-cff6-4815"
            },
            {
                "houseImg": "/uploads/upload_5791a4ff112c6afe0fba15fe3e98dc75.jpg",
                "title": "整租整租整租",
                "tags": [
                    "近地铁"
                ],
                "price": 2000,
                "desc": "二室/100/南/天誉华庭",
                "houseCode": "012746f1-a729-1dd1"
            },
            {
                "houseImg": "/uploads/upload_d86abc4ea446ff13659d89e702e841bc.jfif",
                "title": "11111",
                "tags": [
                    "近地铁"
                ],
                "price": 1111,
                "desc": "二室/1111/西南/",
                "houseCode": "4b947524-6f1f-cc48"
            },
            {
                "houseImg": "/uploads/upload_6e5947b80052d38f25c91d3911bb63c5.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 21,
                "desc": "四室+/12/西/眉州路515弄",
                "houseCode": "f25d38d2-c6b5-ceaa"
            },
            {
                "houseImg": "/uploads/upload_386cf0f4f8cfcb060e9af8189cf46675.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 121,
                "desc": "三室/2/南/眉州路515弄",
                "houseCode": "19b5cd59-aa7f-7a90"
            },
            {
                "houseImg": "/uploads/upload_",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "30479269-f908-b8cc"
            },
            {
                "houseImg": "/uploads/upload_",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "e5c5a872-26c1-a73c"
            },
            {
                "houseImg": "/uploads/upload_undefined",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "0531495b-3395-073c"
            },
            {
                "houseImg": "/uploads/upload_",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "9d5fccbd-0335-b099"
            },
            {
                "houseImg": "/uploads/upload_fc5fffbaaf56c573a8b43b80e8b8a863.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "一室/12/东/眉州路515弄",
                "houseCode": "42d14005-68be-9f60"
            },
            {
                "houseImg": "[object Object]/uploads/upload_",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "980615b2-ba6a-1a29"
            },
            {
                "houseImg": "/uploads/upload_faac887fdf885e6a12fc844a1fa4bda7.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "2287a8a1-4a16-f87a"
            },
            {
                "houseImg": "/uploads/upload_faac887fdf885e6a12fc844a1fa4bda7.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "5c88b35e-e529-99ab"
            },
            {
                "houseImg": "/uploads/upload_faac887fdf885e6a12fc844a1fa4bda7.png",
                "title": "1",
                "tags": [
                    "近地铁"
                ],
                "price": 1,
                "desc": "四室/1/东/眉州路515弄",
                "houseCode": "295c804d-ce34-8559"
            },
            {
                "houseImg": "/uploads/upload_faac887fdf885e6a12fc844a1fa4bda7.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "6023005e-71e9-cd5d"
            },
            {
                "houseImg": "/uploads/upload_faac887fdf885e6a12fc844a1fa4bda7.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 121,
                "desc": "四室/2/东/眉州路515弄",
                "houseCode": "dd97222b-1ceb-b1ef"
            },
            {
                "houseImg": "/uploads/upload_275e11e207d66c70b477c73830d157aa.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "一室/12/东/眉州路515弄",
                "houseCode": "235dcd97-0927-f387"
            },
            {
                "houseImg": "/uploads/upload_48a0c64d94d13f4f4fb0ebcd18319e23.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "一室/12/东/襄阳南路277弄",
                "houseCode": "f4afdecd-66cf-f6f5"
            },
            {
                "houseImg": "/uploads/upload_faac887fdf885e6a12fc844a1fa4bda7.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "四室/12/东/眉州路515弄",
                "houseCode": "b0a0afab-870a-2b48"
            },
            {
                "houseImg": "/uploads/upload_71ae3a381387f0ffa4e86e959eef1594.png",
                "title": "12",
                "tags": [
                    "近地铁"
                ],
                "price": 12,
                "desc": "一室/12/东/眉州路515弄",
                "houseCode": "8a862eaa-a7f6-4624"
            }
        ],
    }
  },
   methods:{
    toDetail(item){
      console.log(item);
      
      this.$router.push({
        name:'detail',
      })
      
    }
  }

}
</script>
<style lang="less" scoped>
.bigBox{
  height: 200px; left: 0px; position: absolute; top: 0px; width: 100%;
  border:2px solid black;
  .pic {
  height:30px; 
  width:30px;
  border: 5px solid red
}
}

.article-page {
  background: #f5f5f5;
}
.article-item {
  margin-bottom: 10px;
  background: #fff;
  padding: 10px 15px;
  .head {
    display: flex;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .con {
      flex: 1;
      overflow: hidden;
      padding-left: 15px;
      p {
        margin: 0;
        line-height: 1.5;
        &.title {
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
          white-space: nowrap;
        }
        &.other {
          font-size: 10px;
          color: #999;
        }
      }
    }
  }
  .body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .foot {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}

</style>

